<template>
  <a-breadcrumb :routes="breadcrumbRoutes">
    <template #itemRender="{ route }">
      <!-- <span>{{ route.title }}</span> -->
      <span
        v-if="breadcrumbRoutes.indexOf(route) === breadcrumbRoutes.length - 1"
        >{{ route.title }}
      </span>
      <router-link v-else :to="route.path">{{ route.title }}</router-link>
    </template>
  </a-breadcrumb>
</template>
<script lang='ts'>
import { computed, defineComponent, onMounted, ref, watch } from "vue";
import { RouteLocationMatched, useRoute } from "vue-router";
interface BreadcrumbRoute {
  path: string;
  name: string;
  icon: string;
  title: string;
  children?: Array<BreadcrumbRoute>;
}
export default defineComponent({
  name: "Breadcrumb",
  setup() {
    const breadcrumbRoutes = ref<Array<BreadcrumbRoute>>([]);
    const currentRoute = useRoute();
    const matched = computed(() => {
      return currentRoute.matched;
    });
    const createBreadcrumbRoutes = (matched: Array<RouteLocationMatched>) => {
      const breadcrumbRoutes: Array<BreadcrumbRoute> = [];
      for (var i in matched) {
        breadcrumbRoutes.push({
          path: matched[i].path,
          name: String(matched[i].name),
          icon: matched[i].meta.icon as string,
          title: matched[i].meta.title as string,
        });
      }
      return breadcrumbRoutes;
    };
    watch(matched, (val) => {
      breadcrumbRoutes.value = createBreadcrumbRoutes(val);
    });
    onMounted(() => {
      breadcrumbRoutes.value = createBreadcrumbRoutes(currentRoute.matched);
    });
    return {
      breadcrumbRoutes,
    };
  },
});
</script>
<style lang='less' scoped>
</style>